import React, { createContext, useContext, useState, ReactNode } from 'react';
import { ThemeConfig } from 'antd/es/config-provider/context';
import { theme } from 'antd';

// 定义主题类型
export type ThemeType = 'light' | 'dark';

// 定义主题背景样式
export const themeBackgrounds = {
  light: 'linear-gradient(97deg, #f2f9fe 0%, #f7f3ff 100%)',
  dark: 'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)'
};

// 定义主题配置
export const themeSettings: Record<ThemeType, ThemeConfig> = {
  light: {
    algorithm: theme.defaultAlgorithm,
    token: {
      colorPrimary: '#6F4CFF',
      borderRadius: 8,
      colorBgBase: '#ffffff',
      colorTextBase: '#000000',
      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
    },
    components: {
      Typography: {
        fontWeightStrong: 600,
      },
      Button: {
        fontWeight: 500,
      }
    }
  },
  dark: {
    algorithm: theme.darkAlgorithm,
    token: {
      colorPrimary: '#6F4CFF',
      borderRadius: 8,
      colorBgBase: '#0D0E11',
      colorTextBase: 'rgba(255, 255, 255, 0.85)',
      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
    },
    components: {
      Typography: {
        fontWeightStrong: 600,
      },
      Button: {
        fontWeight: 500,
      }
    }
  }
};

// 创建上下文对象
interface ThemeContextType {
  themeType: ThemeType;
  toggleTheme: () => void;
  themeConfig: ThemeConfig;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// 创建主题提供者组件
interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const [themeType, setThemeType] = useState<ThemeType>('dark');

  const toggleTheme = () => {
    setThemeType(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const themeConfig = themeSettings[themeType];

  return (
    <ThemeContext.Provider value={{ themeType, toggleTheme, themeConfig }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 创建使用主题的钩子
export const useTheme = (): ThemeContextType => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}; 